<script setup name="inform_detail">
import OAMain from "@/components/OAMain.vue";
import {onMounted, reactive} from "vue";
import informhttp from "@/api/informhttp.js";
import {useRoute} from "vue-router";
import datetimeFormat from "../../utils/datetimeFormat.js";
import {ElMessage} from "element-plus";
const  route = useRoute()
let inform = reactive({
  title:"",
  content:"",
  create_time:"",
  read_count: Number,
  author:{
    realname:"",
    department:{
      name:"",
    }
  }
})
onMounted(async () => {
  try {
    const id = route.params.pk;
    let data = await informhttp.getInformDetail(id)
    Object.assign(inform, data.data)
    await informhttp.readInform(id)
  }catch(err) {
    ElMessage.error(err)
  }
})
</script>

<template>

<OAMain title="通知详情">
  <el-card>
    <template #header>
      <div style="text-align:center;">
        <h2 style="font-size: 40px">{{inform.title}}</h2>
        <el-space :size="20" style="width: 500px">
          <span style="margin-right: 20px">作者：{{inform.author.realname}}</span>
          <span>发布时间：{{datetimeFormat.stringFromDateTime(inform.create_time)}}</span>
        </el-space>
      </div>
    </template>
    <template #default>
      <div v-html="inform.content" class="content"></div>
    </template>
    <template #footer>
      阅读量： {{inform.read_count}}
    </template>
  </el-card>
</OAMain>
</template>
<style scoped>
.content ::v-deep(img){
  max-width: 100%;
}
</style>